<template>
  <el-popover
    :visible="visible"
    placement="bottom"
    :width="props.width"
    :show-arrow="false"
  >
    <template #reference>
      <div
        :style="{
          width: props.width + 'px',
        }"
        @click="visible = !visible"
        class="userRoleSelectContainer"
      >
        <div class="holder">请选择字段</div>
        <img
          :style="{ transform: visible ? 'rotate(180deg)' : 'rotate(0)' }"
          class="icon"
          src="@/assets/lifecycle/selectIcon.svg"
        />
      </div>
    </template>
    <template #default>
      <div class="userRoleSelectContent">
        <div class="title">添加用户角色</div>
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="组织" name="organization"></el-tab-pane>
          <el-tab-pane label="任务角色" name="taskRole"></el-tab-pane>
          <el-tab-pane label="项目角色" name="projectRole"></el-tab-pane>
        </el-tabs>
        <template v-if="activeName === 'organization'">
          <el-input
            v-model="searchValue"
            placeholder="请输入关键词"
            :prefix-icon="Search"
          ></el-input>
          <ul class="fieldList">
            <li
              v-for="item in userListOptions"
              :key="item.account"
              class="item"
            >
              <el-checkbox v-model="item.isChecked" />
              <span class="avatar">
                <img v-if="item.headImg" :src="item.headImg" />
                <span v-else>{{ item.account[0] }}</span>
              </span>
              <span class="label">{{ `${item.name} ${item.account}` }}</span>
            </li>
          </ul>
        </template>
        <template v-if="activeName === 'taskRole'">
          <el-input
            v-model="searchValue"
            placeholder="请输入关键词"
            :prefix-icon="Search"
          ></el-input>
          <ul class="fieldList">
            <li
              v-for="item in userListOptions"
              :key="item.account"
              class="item"
            >
              <el-checkbox v-model="item.isChecked" />
              <!--              <span class="avatar">-->
              <!--                <img v-if="item.headImg" :src="item.headImg" />-->
              <!--                <span v-else>{{ item.account[0] }}</span>-->
              <!--              </span>-->
              <span class="label">{{ `${item.name} ${item.account}` }}</span>
            </li>
          </ul>
        </template>
        <template v-if="activeName === 'projectRole'">
          <el-input
            v-model="searchValue"
            placeholder="请输入关键词"
            :prefix-icon="Search"
          ></el-input>
          <ul class="fieldList">
            <li
              v-for="item in userListOptions"
              :key="item.account"
              class="item"
            >
              <el-checkbox v-model="item.isChecked" />
              <!--              <span class="avatar">-->
              <!--                <img v-if="item.headImg" :src="item.headImg" />-->
              <!--                <span v-else>{{ item.account[0] }}</span>-->
              <!--              </span>-->
              <span class="label">{{ `${item.name} ${item.account}` }}</span>
            </li>
          </ul>
        </template>
        <div class="footerBtn">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
    </template>
  </el-popover>
</template>
<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import { getUserListAll } from "@/api/user.ts";
  interface propsType {
    width: number;
  }
  const props = defineProps<propsType>();
  const userListOptions = ref([]);
  const activeName = ref("organization");
  const visible = ref(false);
  const searchValue = ref("");
  const getUserList = async () => {
    const res = await getUserListAll(
      {
        pageNo: 1,
        pageSize: 9999,
      },
      "1",
    );
    userListOptions.value = res.result.map((item: any) => {
      item.isChecked = false;
      return item;
    });
  };
  onMounted(() => {
    getUserList();
  });
</script>

<style scoped lang="scss">
  .userRoleSelectContainer {
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    padding: 6px 8px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    .holder {
      font-size: 14px;
      color: #999999;
      height: 20px;
      line-height: 20px;
      flex: 1;
    }
    .icon {
      transition: all 0.3s;
      width: 16px;
      height: 16px;
    }
  }
  .userRoleSelectContent {
    :deep(.el-tabs__item) {
      padding: 0 5px;
      color: #5e5e5e;
    }
    :deep(.is-active) {
      padding: 0 6px;
      color: #1aa1fb;
    }
    .title {
      color: #141414;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
      margin-top: 8px;
    }
    .fieldList {
      list-style: none;
      padding: 0;
      margin: 10px 0 0 0;
      max-height: 200px;
      overflow: auto;
      .item {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        border-radius: 4px;
        padding: 0 8px;
        .avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          overflow: hidden;
          //display: flex;
          //align-items: center;
          //justify-content: center;

          span {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            background: #fd4574;
            text-align: center;
            color: #fff;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .label {
          flex: 1;
          font-size: 14px;
          color: #141414;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 隐藏溢出的文本 */
          text-overflow: ellipsis; /* 溢出的文本显示为省略号 */
        }
        transition: all 0.3s;
        &:hover {
          background: #f2f2f2;
        }
      }
    }
    .footerBtn {
      padding: 8px 0 0 0;
      text-align: right;
    }
  }
</style>
